<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>基于Node.js的自动化测试框架Macaca</title>

    <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
    <meta name="author" content="Hakim El Hattab">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/league.css" id="theme">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>

    <!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
</head>

<body>

    <div class="reveal">

        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides">
            <section data-transition="zoom">

                <h5>基于Node.js的自动化测试框架Macaca</h5>
                <p>
                    <small>演讲者： <a href="">赵健</a> </small>
                </p>
            </section>

            <section data-transition="slide">

                <p>
                    软件测试保证软件质量的重要而有效的手段,已成为软件工程中重要且不可或缺的一个环节
                </p>
            </section>

            <!-- Example of nested vertical slides -->
            <section data-transition="Concave">
                <section data-transition="slide">
                    <h5>常规的测试工程周期</h5>

                    <a href="#" class="navigate-down">
                        <img data-src="img/tc.jpg" alt="">
                    </a>
                </section>
                <section data-transition="slide">
                    <h4>指标</h4>
                    <img data-src="img/a1.jpg" alt="">
                </section>
                <section data-transition="slide">
                    <h4>分层考虑</h4>
                    <small>我们提到的模块化不止是代码结构上的模块化，而是从用例的可分层开始考虑，将各层次的测试按照业务生产上的需要，进行合理划分，做到真正意义上的模块化</small>
                    <a href="#/2">
                        <img data-src="img/test-c.jpg" alt="">
                    </a>
                </section>
            </section>

            <section data-transition="Concave">
                <h2>Macaca是什么？</h2>

                <svg width="420px" height="337px" viewBox="0 0 420 337" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
					<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
					<title>monkey</title>
					<desc>Created with Sketch.</desc>
					<defs>
						<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
							<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
							<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
							<feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
							<feMerge>
								<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
								<feMergeNode in="SourceGraphic"></feMergeNode>
							</feMerge>
						</filter>
					</defs>
					<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
						<g id="macaca-logos" transform="translate(-48.000000, -536.000000)">
							<g id="monkey" transform="translate(49.000000, 536.000000)">
								<g id="face" transform="translate(0.000000, 29.355401)">
									<path d="M49.9016854,149.125436 C77.4616252,149.125436 99.8033708,126.782573 99.8033708,99.2212544 C99.8033708,71.6599361 77.4616252,49.3170732 49.9016854,49.3170732 C22.3417456,49.3170732 0,71.6599361 0,99.2212544 C0,126.782573 22.3417456,149.125436 49.9016854,149.125436 Z" id="left-ear" stroke="#979797" fill="#000000"></path>
									<path d="M368.098315,149.125436 C395.658254,149.125436 418,126.782573 418,99.2212544 C418,71.6599361 395.658254,49.3170732 368.098315,49.3170732 C340.538375,49.3170732 318.196629,71.6599361 318.196629,99.2212544 C318.196629,126.782573 340.538375,149.125436 368.098315,149.125436 Z" id="right-ear" stroke="#979797" fill="#000000"></path>
									<path d="M210.174163,307.48055 C305.562485,307.48055 382.889993,244.645287 382.889993,149.149178 C382.889993,95.5815527 360.244972,61.1593556 322.042835,36.0083972 C292.141236,16.3222241 252.055321,0 210.174163,0 C170.038697,0 139.893366,9.49046325 110.567584,27.6079826 C70.1959774,52.5496313 37.4583217,93.8338873 37.4583217,149.149178 C37.4583217,244.645287 114.785841,307.48055 210.174163,307.48055 Z" id="face-outer" fill="#000000"></path>
									<g id="mouth-+-left-eye-+-right-eye" filter="url(#filter-1)" transform="translate(68.101124, 43.445993)">
										<path d="M37.1614596,214.216863 C50.6517046,221.983815 62.9901181,227.930633 79.9424469,232.196652 C101.899952,237.722213 128.272824,240.411342 140.450821,240.411342 C149.922987,240.411342 177.220199,238.511464 201.684541,232.196652 C218.109884,227.956891 231.408897,220.883254 244.101977,214.216863 C275.417809,197.769825 280.630617,169.030196 280.630617,163.216029 C280.630617,131.814096 269.198184,114.316189 251.14151,103.264367 C225.327869,87.4647916 185.340466,86.020714 140.45082,86.020714 C92.9466003,86.020714 51.3183888,88.3997783 26.2431301,107.08327 C14.4751228,115.851573 4.73736106,126.69136 1.57623481,144.845638 C0.655762771,150.131889 1.57623481,156.724004 1.57623481,163.216029 C1.57623481,167.836419 9.64020831,198.371619 37.1614596,214.216863 Z" id="mouth" fill="#FFFFFF"></path>
										<ellipse id="left-eye" fill="#FFFFFF" cx="100.390449" cy="70.4529617" rx="72.2106742" ry="70.4529617"></ellipse>
										<ellipse id="left-c" stroke="#979797" fill="#000000" cx="85.7134831" cy="69.2787456" rx="14.0898876" ry="14.0905923"></ellipse>
										<ellipse id="right-eye" fill="#FFFFFF" cx="180.233146" cy="70.4529617" rx="72.2106742" ry="70.4529617"></ellipse>
										<ellipse id="right-c" stroke="#979797" fill="#000000" cx="183.168539" cy="69.2787456" rx="14.0898876" ry="14.0905923"></ellipse>
									</g>
								</g>
								<g id="leaf" transform="translate(178.471910, 0.000000)">
									<path d="M38.5803787,19.6164184 C39.4741724,17.7592079 40.9469548,15.3120854 42.0508958,13.8153317 C43.971324,11.2115622 46.9489628,8.28104528 49.8006109,6.31936436 C52.474667,4.47985094 55.0238285,3.55080174 56.8990803,2.83021736 C65.3423692,-0.414201324 82.2213254,-0.300990777 88.5381115,2.83021732 C93.5294785,5.30441998 97.2740571,8.02103001 99.2755871,10.1337036 C101.317221,12.2887078 102.068082,13.8153316 102.068082,13.8153316 C102.068082,13.8153316 91.752383,12.2814218 81.6929749,12.3258316 C76.9448381,12.3467934 72.6573343,13.003978 68.7945997,13.8153317 C65.204079,14.5695078 61.460492,15.5025322 55.2722386,18.2279617 C46.5447287,22.0717301 35.5211176,27.8818154 35.5211176,27.8818154 C35.5211176,27.8818154 36.4612967,24.0196503 38.5803787,19.6164184 Z" id="right" fill="#373737"></path>
									<path d="M36.3204169,24.9493292 C36.1960664,24.2126342 35.8609507,23.2058491 35.5380859,22.5652168 C34.9764266,21.4507656 33.8705608,20.0966341 32.632076,19.0851916 C31.4707203,18.1367387 30.1885052,17.5111225 29.2531511,17.0383501 C25.0417353,14.9097006 16.3284636,13.1168631 11.9973161,13.4020293 C5.08401404,13.8572066 0.704691269,15.2247781 0.704691269,15.2247781 C0.704691269,15.2247781 12.9399098,17.9558975 19.3941483,20.2839807 C24.0310205,21.9565287 36.3407359,28.1156044 36.3407359,28.1156044 C36.3407359,28.1156044 36.6152377,26.6959482 36.3204169,24.9493292 L36.3204169,24.9493292 Z" id="left" fill="#373737"></path>
									<path d="M35.9057303,27.7747253 L35.9057303,34.6832066" id="center" stroke="#000000" stroke-linecap="square"></path>
								</g>
							</g>
						</g>
					</g>
				</svg>

            </section>

            <section data-transition="Concave">
                <h5>完整的自动化测试解决方案--阿里系开源框架</h5>

                <p class="fragment fade-down">跨平台</p>
                <p class="fragment fade-left">多语言栈</p>
                <p class="fragment fade-right">标准化</p>
                <p class="fragment fade-up">提供CI方案</p>
                <p class="fragment current-visible">支持真机</p>
            </section>

            <section>
                <h4>跨平台</h4>
                <p>
                    同时支持PC端和移动端(Android、iOS)自动化测试
                    <img data-src="img/kpt.jpg" alt="">
                </p>
            </section>

            <section data-markdown>
                <h4>多语言栈</h4>
                <p>
                    支持JavaScript（Node.js）、Java、Python
                </p>
            </section>

            <section>
                <section id="fragments">
                    <h4>标准化</h4>
                    <p>遵循W3C webdriver 标准，多端无忧，理解成本降低</p>

                </section>

            </section>

            <section id="transitions">
                <h2></h2>
                <p>
                    提供持续集成方案及持续集成平台的私有部署方案--docker/reliable
                </p>
            </section>

            <section id="themes" data-transition="Convex">
                <h4>真机和模拟器</h4>
                <p>
                    <img data-src="img/ios.gif" alt="">
                </p>
            </section>

            <section data-transition="Concave">

                <h4>Macaca执行流程</h4>
                <p>
                    <img src="img/cs.jpg">
                </p>


                <!-- <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
                    <h2>Image Backgrounds</h2>
                    <pre><code class="hljs">&lt;section data-background="image.png"&gt;</code></pre>
                </section>
                <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
                    <h2>Tiled Backgrounds</h2>
                    <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
                </section>
                <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
                    <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
                        <h2>Video Backgrounds</h2>
                        <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
                    </div>
                </section>
                <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
                    <h2>... and GIFs!</h2>
                </section> -->
            </section>

            <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
                <h4>快速上手</h4>
                <small># 安装工具包和驱动</small>
                <pre><code class="hljs">$ npm i macaca-cli -g</code></pre>

            </section>

            <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
                <h4>安装完成</h4>

                <img src="img/200.jpg">
            </section>

            <section>
                <h4>查看环境</h4>
                <pre><code class="hljs" data-trim contenteditable>
                        $ macaca doctor
					</code></pre>
                <img src="img/09.jpg">
            </section>

            <!-- <section>
                <h4>官方示例</h4>
                <ul>
                    <li>No order here</li>
                    <li>Or here</li>
                    <li>Or here</li>
                    <li>Or here</li>
                </ul>
            </section>

            <section>
                <h2>Fantastic Ordered List</h2>
                <ol>
                    <li>One is smaller than...</li>
                    <li>Two is smaller than...</li>
                    <li>Three!</li>
                </ol>
            </section> -->


            <section>
                <h4>官方示例</h4>
                <small># 拉取官方示例</small>
                <pre>
                    <code class="hljs" data-trim contenteditable>
                        $ git clone https://github.com/macaca-sample/sample-nodejs.git --depth=1
                    </code>
                <code class="hljs" data-trim contenteditable>
                       $ cd sample-nodejs
                    </code>
<small> 安装项目依赖</small>
                    <code class="hljs" data-trim contenteditable>
                      $ npm i
                    </code>
                    <small> 启动server并打印详细日志</small>
                    <code class="hljs" data-trim contenteditable>
                      $ macaca run --verbose
                    </code>
                
                </pre>

            </section>

            <section data-background-video="https://os.alipayobjects.com/rmsportal/bgBKHXYSrlYpuvv.mp4">
                <h4>web测试</h4>

            </section>

            <section>
                <h4>IOS的测试</h4>
                <p>安装 Xcode8.3 或者更高版本</p>
                <p>需要安装 **usbmuxd** 以便于通过 USB 通道测试 iOS 真机，不需要测试真机则不用安装</p>
                <pre>
                <code class="hljs" data-trim contenteditable>
                      $ brew install usbmuxd
                    </code> 应用中如含有 WebView
                <code class="hljs" data-trim contenteditable>
                      $ brew install ios-webkit-debug-proxy
                    </code>
                <code class="hljs" data-trim contenteditable>
                      $ brew install carthage
                    </code> 
                     </pre> 准备 App 包：如需要测试 iOS 应用，请使用 Scheme 设置为 debug 的 .app 包
            </section>

            <section>
                <h4>IOS测试</h4>

                <img src="img/IOS1.gif">
            </section>

            <section>
                <h4>Android的测试</h4>
                <p>
                    安装 JDK，要求 1.8 或更高版本
                    <img src="img/az.png">
                </p>
            </section>

            <section data-state="customevent" data-background-video="https://os.alipayobjects.com/rmsportal/VoxFKOVDsOjKyMs.mp4">
                <!-- <h2>State Events</h2> -->

            </section>


            <!-- <section>
                <h2>Much more</h2>
                <ul>
                    <li>Right-to-left support</li>
                    <li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
                    <li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
                    <li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
                    <li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
                </ul>
            </section> -->

            <section style="text-align: left;">
                <h1>THE END</h1>
                <p>
                    谢谢！
                </p>
            </section>

        </div>

    </div>

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>

    <script>
        // More info https://github.com/hakimel/reveal.js#configuration
        Reveal.initialize({
            controls: true,
            progress: true,
            history: true,
            center: true,

            transition: 'zoom', // none/fade/slide/convex/concave/zoom

            // More info https://github.com/hakimel/reveal.js#dependencies
            dependencies: [{
                src: 'lib/js/classList.js',
                condition: function() {
                    return !document.body.classList;
                }
            }, {
                src: 'plugin/markdown/marked.js',
                condition: function() {
                    return !!document.querySelector('[data-markdown]');
                }
            }, {
                src: 'plugin/markdown/markdown.js',
                condition: function() {
                    return !!document.querySelector('[data-markdown]');
                }
            }, {
                src: 'plugin/highlight/highlight.js',
                async: true,
                callback: function() {
                    hljs.initHighlightingOnLoad();
                }
            }, {
                src: 'plugin/zoom-js/zoom.js',
                async: true
            }, {
                src: 'plugin/notes/notes.js',
                async: true
            }]
        });
    </script>

</body>

</html>